<template>
  <div class="layerTree">
    <el-tabs v-model="activeName" @tab-click="tabSwitch">
      <el-tab-pane v-for="(dist,index) in userDataTree" :key="index" :label="dist.name" :name="dist._id" />
    </el-tabs>
    <div style="margin-bottom:15px;">
      <el-input ref="input-search" v-model="filterText" :key="index" clearable placeholder="输入图层名称过滤"/>
    </div>
    <!--图层树-->
    <div class="layer-tree-content">
      <el-tree
        ref="layers"
        :data="layers"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        show-checkbox
        render-after-expand
        highlight-current
        node-key="_id"
        @check="nodeCheck"
      >
        <span slot-scope="{node,data}">
          <i v-if="data.layers" class="treeGroupIcon kfb-icon-leimu"/>
          <i v-if="!data.layers" class="treeItemIcon kfb-icon-kehuxinxiliebiao"/>
          <span v-if="data.layers" class="treeGroup">{{ node.label }}</span>
          <span v-if="!data.layers" :disabled="!data.isVisible" class="treeItem" @click="layerLocateTo($event,data)">{{ node.label }}</span>
          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="!data.layers && data.isVisible && (data.statics.url || '')!==''"
              type="success"
              icon="el-icon-s-data"
              circle
              @click="staticsQuery($event,data)"
            />
          </div>
          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="!data.layers && data.isVisible && (data.attribute || '')!==''"
              type="success"
              icon="el-icon-message"
              circle
              @click="attributesQuery($event,data)"
            />
          </div>
          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="!data.layers && data.isVisible && (data.legendUrl || '')!=''"
              type="success"
              icon="el-icon-picture"
              circle
              @click="showLegend($event,data)"
            />
          </div>
          <el-slider
            v-if="!data.layers && data.isVisible && data.type != 0"
            v-model="data.alpha"
            @change="change($event,data)"
          />
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'

  export default {
      data() {
      return {
        filterText: '', // 过滤
        defaultProps: {
          children: 'layers',
          label: 'name'
        },
        index: 0, // 双地图初始化计数器
        activeName: '',
        dataIndex: 0 // 数据索引
      }
    },
    watch: {
      filterText(val) {
        this.$refs.layers.filter(val)
      }
    },
    methods: {
      /**
       * 图层过滤
       * @param value
       * @param data
       * @returns {boolean}
       */
      filterNode(value, data) {
        if (value == '') return true
        return data.name.indexOf(value) !== -1
      },

      // 模块数据切换
      tabSwitch(val) {
        this.dataIndex = parseInt(val.index)
         const ids = this.allLayers.filter(l => l.checked || l.isVisible).map(l => l._id)
         this.$refs.layers.setCheckedKeys(ids)
      },
      /**
       * 控制图层开闭
       * @param data
       * @param Node
       */
      async nodeCheck(data, Node) {
        if (data.layers) {
          for (let i = 0; i < data.layers.length; i++) {
            const layer = data.layers[i]
            const isVisible = Node.checkedKeys.indexOf(layer._id) > 0
            layer.isVisible = isVisible
            const bid = this.findNearVisibleLayerId(layer)
            this.mapService.setLayerVisible(isVisible, layer, bid ? bid.id : undefined)
            layer.alpha = 0
          }
        } else {
          const isVisible = Node.checkedKeys.indexOf(data._id) >= 0
          data.isVisible = isVisible
          const bid = this.findNearVisibleLayerId(data)
          this.mapService.setLayerVisible(isVisible, data, bid ? bid.id : undefined)
          data.alpha = 0
        }
      },
      /**
       * 设置透明度
       * @param $event
       * @param data
       */
      change($event, data) {
        data.alpha = $event
        this.mapService.setOpacityValue(1 - $event / 100, data)
      },
          /**
     * 属性查询
     */
    attributesQuery($event, layer) {
      this.$store.commit('eswyzt/setCurrentSearchLayer', layer)
      this.$store.commit('eswyzt/setAttributeTable', true)
    },
      /**
       *
       * 图层定位
       * @param $event
       * @param data
       */
      layerLocateTo($event, data) {
        this.mapService.setMapBoundsByLayerBounds(data) // 高亮
      },

    /**
     * 显示图例
     */
    showLegend($event, layer) {
      this.$store.commit('eswyzt/setCurrentSearchLayer', layer)
      this.$store.commit('eswyzt/setShowLayerLegend', true)
    },
    /**
     * 图层统计
     */
    staticsQuery($event, layer) {
      this.$store.commit('eswyzt/setShowLayerStatics', true)
      this.$store.commit('eswyzt/setCurrentSearchLayer', layer)
    },

    // 查找最近打开图层
    findNearVisibleLayerId(layer) {
        let index = 0
        for (let i = this.allLayers.length - 1; i >= 0; i--) {
          if (layer._id === this.allLayers[i]._id) {
            index = i
            continue
          }
          if (index > i && this.allLayers[i].param && this.allLayers[i].param.isAdd) {
            return this.allLayers[i].param.layers[0]
          }
        }
        return undefined
      },

     // 选中默认图层
    checkDefaultLayers() {
      const checkLayers = this.allLayers.filter(l => l.checked)
      const ids = checkLayers.map(l => l._id)
      this.$refs['layers'].setCheckedKeys(ids)
      const checkedKeys = this.$refs['layers'].getCheckedKeys(true)
      const checkedNodes = this.$refs['layers'].getCheckedNodes(false, true)
      const halfCheckedKeys = this.$refs['layers'].getHalfCheckedKeys()
      const halfCheckedNodes = this.$refs['layers'].getHalfCheckedNodes()
      const Node = {
        checkedKeys: checkedKeys,
        checkedNodes: checkedNodes,
        halfCheckedKeys: halfCheckedKeys,
        halfCheckedNodes: halfCheckedNodes
      }
      checkLayers.forEach(l => {
        this.nodeCheck(l, Node)
      })
    }
    },

    computed: {
      ...mapGetters('user', ['allLayers', 'userDataTree', 'layerTree']),
      ...mapState({
        // 地图服务类
        mapService(state) {
          return state.eswyzt.aspect.getMasterService()
        }
      }),

      // 每个模块的图层
      layers() {
        return this.userDataTree.length > 0 ?　this.userDataTree[this.dataIndex].groups : []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs['input-search'].focus()
        this.activeName = this.userDataTree.length > 0 ? this.userDataTree[0]._id : '' // 默认显示第一个
      })

      this.mapService.on('map.init', () => {
        if (this.index == 1)
          //  this.checkDefaultLayers();                                                     //在地图初始化后执行
           { this.index++ }
      }, this)
    }
  }
</script>

<style>

@media only screen and (max-height: 500px) {
  .filter-tree {
    height: 200px;
    overflow-y: scroll;
  }
}

@media only screen and (max-height: 1000px) {
  .filter-tree {
    max-height: 250px;
    overflow-y: auto;
  }
}

@media only screen and (max-height: 1210px) {
  .filter-tree {
    max-height: 450px;
    overflow-y: auto;
  }
}

.layerTree ::-webkit-scrollbar {
  display: none;
}
/**
   * 图层树checkbox的外边框颜色
   */
.layerTree .el-checkbox__inner {
  border-color: #fff;
}

/**
   * 图层树过滤输入的外边框颜色
   */
.layerTree .el-input__inner:focus {
  border-color: #398f8699;
}

/**
   * 图层树Checkbox背景颜色
   */
.layerTree .el-checkbox__inner {
  background-color: #ffffff00;
}

/**
   * 图层树Checkbox选中颜色和边框颜色
   */
.layerTree .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #398f86ff;
  border-color: #fff0;
}

/**
   * 图层树Checkbox未选中颜色和边框颜色
   */
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #fff;
}

.layerTree .el-tree-node__children .el-tree-node__content {
  height: auto;
  padding: 4px;
}

.layerTree .el-main {
  padding: 0px;
}

 /*.el-input__inner {*/
  /*height: 30px;*/
  /*background-color: rgba(0, 0, 0, 0);*/
  /*color: #fff;*/
  /*border-radius: 0px;*/
/*}*/

.layerTree .el-tree-node__content {
  display: block;
}

.layerTree .el-slider__runway {
  width: 80%;
  margin: 5px 20px;
  margin-left: 52px;
  height: 3px;
}

.layerTree .el-button.is-circle {
  padding: 2px;
}

/**
   * 进度条背景颜色
   */
.layerTree .el-slider__bar {
  height: 3px;
  background-color: #398f86ff;
}

/**
   * 进度条按钮背景颜色
   */
.layerTree .el-slider__button {
  width: 10px;
  height: 10px;
  border-color: #398f86ff;
}

.layerTree .el-slider__button-wrapper {
  top: -13px;
  height: 30px;
  width: 30px;
}

.layerTree .el-button {
  font-size: 5px;
}

.layerTree .treeGroupIcon {
  font-size: 16px;
}

.layerTree .treeItemIcon {
  font-size: 15px;
  /*color: #409eff;*/
}

.layerTree .treeGroup {
  font-size: 16px;
  color: #fff;
  /* font-weight: bold; */
  font-family: "Microsoft YaHei";
  /* color: #409eff */
}

.layerTree .treeItem {
  font-size: 15px;
  color: #fff;
  font-family: "Microsoft YaHei";
}

/**
   * 图层树背景透明
   */
.layerTree .el-tree {
  background: rgba(0, 0, 0, 0);
}

/* 设置节点hover时的样式 */
.layerTree .el-tree-node > .el-tree-node__content:hover {
  background-color: #00000043;
}

/* 设置节点选中的样式 */
.layerTree .el-tree-node:focus > .el-tree-node__content {
  background-color: #00000043;
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: #00000043;
}
</style>

